<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition属性</title>
    <style type="text/css">
        /*
            transition属性的值：
            transition-property：过渡效果的css属性的名称（color,background,font-size...）！
                                可以只设置一个属性，一般方便起见使用all！针对于所有的属性
            transition-duration：过渡效果需要多少秒
            transition-timing-function：速度曲线！
            ease：慢速开始，之后变快！
            linear：匀速！
            ease-in：慢速开始！
            ease-out：慢速结束：
            ease-in-out：慢速开始！慢速结束！
            transition-delay：过渡效果开始前的等待时间！默认是0s！
        */
        div{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: orange;
            /*过渡效果*/
            transition: all 1s linear;
        }
        div:hover{
            background-color: red;
            font-size: 25px;
            /*transform: rotate(360deg);*/
        }
    </style>
</head>
<body>
    <div>
        能旋转不？
    </div>
</body>
</html>